<template>
  <div class="home">
    <div class="container">
      <div class="intro">
        <h1 class="main-title">Vue 3 高级特性演示</h1>
        <p class="description">
          探索 Vue 3 中最强大和实用的新特性，包括 CSS
          v-bind、自定义元素、性能优化、双向绑定和浅层响应式功能
        </p>
      </div>

      <div class="content-layout">
        <!-- 左侧目录导航 -->
        <aside class="sidebar">
          <div class="toc">
            <h3 class="toc-title">📋 特性目录</h3>
            <nav class="toc-nav">
              <a
                v-for="item in tocItems"
                :key="item.id"
                :class="['toc-item', { active: activeSection === item.id }]"
                @click.prevent="scrollToSection(item.id)"
              >
                <span class="toc-icon">{{ item.icon }}</span>
                <div class="toc-content">
                  <span class="toc-name">{{ item.name }}</span>
                  <span class="toc-version">{{ item.version }}</span>
                </div>
              </a>
            </nav>

            <div class="toc-progress">
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  :style="{ height: progressHeight + '%' }"
                ></div>
              </div>
            </div>
          </div>
        </aside>

        <!-- 右侧内容区域 -->
        <main class="main-content">
          <div id="css-v-bind">
            <CssVBindDemo />
          </div>
          <div id="define-custom-element">
            <DefineCustomElementDemo />
          </div>
          <div id="v-memo">
            <VMemoDemo />
          </div>
          <div id="define-model">
            <DefineModelDemo />
          </div>
          <div id="shallow-reactivity">
            <ShallowReactivityDemo />
          </div>
          <div id="define-options">
            <DefineOptionsDemo />
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import CssVBindDemo from "./components/CssVBindDemo.vue";
import DefineCustomElementDemo from "./components/DefineCustomElementDemo.vue";
import VMemoDemo from "./components/VMemoDemo.vue";
import DefineModelDemo from "./components/DefineModelDemo.vue";
import ShallowReactivityDemo from "./components/ShallowReactivityDemo.vue";
import DefineOptionsDemo from "./components/DefineOptionsDemo.vue";

// 目录数据
const tocItems = ref([
  {
    id: "css-v-bind",
    name: "CSS v-bind 特性",
    version: "Vue 3.2+",
    icon: "🎨",
  },
  {
    id: "define-custom-element",
    name: "defineCustomElement",
    version: "Vue 3.2+",
    icon: "🔧",
  },
  {
    id: "v-memo",
    name: "v-memo 性能优化",
    version: "Vue 3.2+",
    icon: "⚡",
  },
  {
    id: "define-model",
    name: "defineModel 双向绑定",
    version: "Vue 3.4+",
    icon: "🔗",
  },
  {
    id: "shallow-reactivity",
    name: "shallowRef & shallowReactive",
    version: "Vue 3.0+",
    icon: "🔍",
  },
  {
    id: "define-options",
    name: "defineOptions 组件选项",
    version: "Vue 3.3+",
    icon: "⚙️",
  },
]);

// 当前激活的章节
const activeSection = ref("");
// 阅读进度
const progressHeight = ref(0);

// 平滑滚动到指定章节
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId);
  if (element) {
    const offsetTop = element.offsetTop - 100; // 留出一些空间
    window.scrollTo({
      top: offsetTop,
      behavior: "smooth",
    });
  }
};

// 监听滚动事件，更新当前激活章节和进度
const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  // 计算阅读进度
  const progress = (scrollTop / (documentHeight - windowHeight)) * 100;
  progressHeight.value = Math.min(100, Math.max(0, progress));

  // 找到当前可见的章节
  let currentSection = "";
  for (const item of tocItems.value) {
    const element = document.getElementById(item.id);
    if (element) {
      const rect = element.getBoundingClientRect();
      if (rect.top <= 150) {
        // 150px 的偏移量
        currentSection = item.id;
      }
    }
  }

  if (currentSection) {
    activeSection.value = currentSection;
  }
};

// 节流函数
const throttle = (func: Function, delay: number) => {
  let timeoutId: number | null = null;
  let lastExecTime = 0;

  return function (...args: any[]) {
    const currentTime = Date.now();

    if (currentTime - lastExecTime > delay) {
      func(...args);
      lastExecTime = currentTime;
    } else {
      if (timeoutId) clearTimeout(timeoutId);
      timeoutId = (setTimeout(() => {
        func(...args);
        lastExecTime = Date.now();
      }, delay - (currentTime - lastExecTime)) as unknown) as number;
    }
  };
};

// 节流后的滚动处理函数
const throttledHandleScroll = throttle(handleScroll, 100);

onMounted(() => {
  // 初始化当前章节
  handleScroll();
  // 监听滚动事件
  window.addEventListener("scroll", throttledHandleScroll);
});

onUnmounted(() => {
  // 清理事件监听
  window.removeEventListener("scroll", throttledHandleScroll);
});
</script>

<style scoped>
.home {
  min-height: 100vh;
  padding: 2rem 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.intro {
  text-align: center;
  margin-bottom: 4rem;
}

.main-title {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.description {
  font-size: 1.2rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.content-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}

/* 左侧目录样式 */
.sidebar {
  position: sticky;
  top: 2rem;
  height: fit-content;
}

.toc {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.toc-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: #64748b;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}

.toc-item:hover {
  background: #f8fafc;
  color: #374151;
  transform: translateX(4px);
}

.toc-item.active {
  background: linear-gradient(135deg, #667eea10, #764ba220);
  color: #667eea;
  border-color: #667eea;
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.toc-item.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 2px;
}

.toc-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.toc-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1;
}

.toc-name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

.toc-version {
  font-size: 0.8rem;
  opacity: 0.7;
  font-weight: 500;
  background: #f1f5f9;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.toc-item.active .toc-version {
  background: #667eea20;
  color: #667eea;
}

/* 进度条 */
.toc-progress {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.progress-bar {
  width: 4px;
  height: 120px;
  background: #f1f5f9;
  border-radius: 2px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 2px;
  transition: height 0.3s ease;
  position: absolute;
  bottom: 0;
}

/* 右侧内容区域 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.main-content > div {
  scroll-margin-top: 100px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-layout {
    grid-template-columns: 240px 1fr;
    gap: 2rem;
  }

  .toc {
    padding: 1rem;
  }

  .toc-item {
    padding: 0.75rem;
  }

  .toc-name {
    font-size: 0.9rem;
  }

  .toc-version {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sidebar {
    position: static;
    order: 2;
  }

  .toc {
    margin-top: 2rem;
  }

  .toc-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
  }

  .toc-item {
    flex-shrink: 0;
    min-width: 200px;
  }

  .progress-bar {
    display: none;
  }

  .main-title {
    font-size: 2rem;
  }

  .description {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }

  .home {
    padding: 1rem 0;
  }

  .intro {
    margin-bottom: 2rem;
  }

  .toc-item {
    min-width: 180px;
    padding: 0.5rem;
  }

  .toc-icon {
    font-size: 1.25rem;
  }

  .toc-name {
    font-size: 0.85rem;
  }
}

/* 滚动条样式优化 */
.toc-nav::-webkit-scrollbar {
  height: 4px;
}

.toc-nav::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}

.toc-nav::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.toc-nav::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
